<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
</head>
<style>
    .box1{
        width: 1000px;
        height: 1000px;
        background-color: rgb(87, 87, 87);
       
    }
    .box1 div{
        width: 100px;
        height: 100px;
        /* margin-left: 0; */
        
    }
    .box2{
        /* transition: 2s; */
        background-color: rgb(34, 204, 125);
        /*  关键帧的名字 */
        animation-name: test;
        /* 动画执行时间 */
        animation-duration: 2s;
        /* 动画的延迟时间 */
        animation-delay: 2s;
        /* 动画播放由快到慢 */
        animation-timing-function: ease-in-out;
        /* 动画的播放次数 infinite无限次*/
       animation-iteration-count: 1;
       /* 动画的运行方向 */
       animation-direction: normal;
       /* 动画的执行状态 */
       /* animation-play-state: running; */
       /* 动画的填充模式 
       none:默认值 动画执行完毕元素回到原来位置
       forward 动画执行完毕会停止在动画结束的位置
       backwards 动画延时等待时,元素就会处于开始位置
        both 结合了forward和backwards
       */
       animation-fill-mode: forward;
    }
    @keyframes test{
        from{
            margin-left: 0;
        }
        to{
            margin-left: 900px;
        }
    }
    .box1:hover div{
        animation-play-state: paused;
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>